<template>
  <el-dialog :model-value="dialogData.isShow" :title="dialogData.type == 'edit' ? '编辑' : '新增'" @close="closeDialog" draggable>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="90px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="上级分类" prop="parentId">
            <custom-tree-select v-model:value="form.parentId" :options="categoryList" placeholder="请选择上级分类"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="分类名称" prop="categoryName">
            <el-input v-model="form.categoryName" maxlength="255" placeholder="请输入分类名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="form.sort" placeholder="请输入排序" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="分类图标" prop="icon" style="height: 200px">
            <Upload v-model:value="form.icon" type="image"
            :customStyle="{'width':'120px','height':'120px'}"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { addArticleTopics, getArticleCategory, updateArticleCategory, getAllArticleCategoryTreeList } from "@/api/app/articleCategoty";

const formRef = ref<FormInstance>()

const emits = defineEmits<{
  (event: 'refresh'): void
}>()

// 表单
let form: any = ref({
  id: null,
  categoryName: null,
  parentId: null,
  icon: null,
});

// 效验规则
const rules = reactive<FormRules>({
  parentId: [
    {
      required: true,
      message: '请选择上级分类',
      trigger: 'blur',
    },
  ],
  categoryName: [
    {
      required: true,
      message: '请输入分类名称',
      trigger: 'blur',
    },
  ],
  icon: [
    {
      required: true,
      message: '请上传',
      trigger: 'blur',
    },
  ]
})

// 获取详情
const getDetails = (id: string) => {
  getArticleCategory(id).then(res => {
    form.value = Object.assign({}, form.value, res);
  })
}

const categoryList = ref([])

const getAllCategoryList = () => {
  getAllArticleCategoryTreeList({}).then(res => {
    let data = res || []
    function fun(dataList: any) {
      dataList.map((item: any) => {
        if (item.children) fun.call(this, item.children)
        Object.assign(item, {name: item.categoryName})
      })
    }
    fun.call(this, data)
    categoryList.value = [{
      id: '0',
      name: '根目录',
      children: data
    }]
    form.value.parentId = dialogData.parentId
  })
}

// 弹框数据
const dialogData = reactive({
  isShow: false,
  type: 'add',
  id: null,
  parentId: null,
  sort : 0
})

// 打开弹框
const openDialog = async (props) => {
  const { type, id, parentId } = props
  dialogData.isShow = true;
  dialogData.title = '新增分类';
  dialogData.type = type
  dialogData.parentId = id
  if (type == 'edit') {
    dialogData.id = id;
    dialogData.parentId = parentId
    dialogData.title = '编辑分类';
    getDetails(id);
  }
  getAllCategoryList()
}

// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  dialogData.id = null;
  form.value = {};
}
// 提交

const submit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid: any) => {
    if (valid) {
      let data = form.value;
      console.log(data)
      if (data.id) {
        updateArticleCategory({ ...data }).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      } else {
        addArticleTopics({ ...data }).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      }
    }
  })
}

defineExpose({
  openDialog,
});
</script>

<style scoped></style>
